<template>
  <div style="margin-top: 20px;">
    <el-card shadow="hover" class="box-cardpp">
      <div class="clearfix">
        <span style="font-size: 1.5em; font-weight: bold; margin-left: 10px;">数控车床</span>
        <div style="float: right;">
          <el-button type="primary" size="small">编辑</el-button>
          <el-button type="danger" size="small" style="margin-left: 10px;">删除</el-button>
          <el-button type="info" size="small" style="margin-left: 10px;">查看二维码</el-button>
          <el-dropdown>
            <el-button type="primary" size="small" style="margin-left: 10px;">更多操作<i
                class="el-icon-arrow-down el-icon--right"></i></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>操作1</el-dropdown-item>
              <el-dropdown-item>操作2</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="status" style="float: right; margin-right: 20px;">
        <svg-icon icon-class="zhengc" style="width: 110px; height: 100px;" />
      </div>
      <div style="margin-top: 40px;">
        <div style="margin-left: 10px;">创建人：{{ EqData[0].createdBy }}</div>
        <div style="margin-top:-20px ;margin-left: 290px;">更新人：{{ EqData[0].updater }}</div>
        <div style="margin-top: 25px; margin-left: 10px;">创建时间：{{ EqData[0].createdBy }}</div>
        <div style="margin-top: -21px; margin-left: 290px;">更新时间：{{ EqData[0].updated }}</div>
      </div>
      <el-tabs style="margin-top: 50px;">
        <el-tab-pane label="设备信息">
          <el-card>
            <div slot="header" class="clearfix">
              <span>基础信息</span>
            </div>
            <el-row :gutter="20" style="line-height: 3; margin-left: 90px; margin-right: -230px;">
              <el-col :span="12">
                <div>设备编号：{{ EqData[0].code }}</div>
                <div>规格型号：{{ EqData[0].specifications }}</div>
                <div>生产厂家：{{ EqData[0].manufacturer }}</div>
                <div>品牌：{{ EqData[0].brand }}</div>
                <div>总功率（kw）：{{ EqData[0].totalPower }}</div>
                <div>设备类别：{{ EqData[0].deviceType }}</div>
                <div>存放位置：{{ EqData[0].storageLocation }}</div>
                <div>使用部门：{{ EqData[0].useDepartments }}</div>
                <div>联系方式：{{ EqData[0].contact }}</div>
                <div>启用日期：{{ EqData[0].dateofEnablement }}</div>
                <div>备注：{{ EqData[0].remark }}</div>
              </el-col>
              <el-col :span="12">
                <div>设备名称：{{ EqData[0].name }}</div>
                <div>制造国家：{{ EqData[0].manufacture }}</div>
                <div>出厂编号：{{ EqData[0].factoryNumber }}</div>
                <div>出厂日期：{{ EqData[0].dateofManufacture }}</div>
                <div>重量（吨）：{{ EqData[0].weight }}</div>
                <div>设备用途：{{ EqData[0].equipmentUse }}</div>
                <div v-if="EqData[0].equipmentUse == 1">当前状态：正常运行</div>
                <div v-if="EqData[0].equipmentUse == 2">当前状态: 禁用</div>
                <div v-if="EqData[0].equipmentUse == 3">当前状态：报废</div>
                <div>设备负责人：{{ EqData[0].theEquipment }}</div>
                <div>原值：{{ EqData[0].originalValue }}元</div>
                <div>安置地点：{{ EqData[0].installationSite }}</div>
              </el-col>
            </el-row>
          </el-card>
          <!--随机附件-->
          <el-card style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>随机附件</span>
            </div>
            <div style="margin-bottom: 20px;">
              <el-button type="primary">导出</el-button>
            </div>
            <el-table :data="tableData" stripe style="width: 100%;" :cell-style="{ padding: '0px' }"
              :row-style="{ height: '40px' }">
              <el-table-column type="selection" width="55" align="center">
              </el-table-column>
              <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="numbering" label="附件编号" align="center">
              </el-table-column>
              <el-table-column prop="name" label="附件名称" align="center">
              </el-table-column>
              <el-table-column prop="model" label="规格型号" align="center">
              </el-table-column>
              <el-table-column prop="type" label="附件类型" align="center">
              </el-table-column>
              <el-table-column prop="quantity" label="数量" align="center">
              </el-table-column>
              <el-table-column prop="remark" label="备注" align="center">
              </el-table-column>
            </el-table>
          </el-card>
          <!--设备查看-->
          <el-card style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>主设备</span>
            </div>
            <el-row :gutter="20" style="line-height: 3; margin-left: 30px;margin-right: -90px;">
              <el-col :span="12">
                <div>设备编号：{{ EqData[0].code }}</div>
                <div>规格型号：{{ EqData[0].specifications }}</div>
                <div>存放位置：{{ EqData[0].storageLocation }}</div>
                <div>使用部门：{{ EqData[0].useDepartments }}</div>
              </el-col>
              <el-col :span="12">
                <div>设备名称：{{ EqData[0].name }}</div>
                <div>设备类型：{{ EqData[0].deviceType }}</div>
                <div v-if="EqData[0].equipmentUse == 1">当前状态：正常运行</div>
                <div v-if="EqData[0].equipmentUse == 2">当前状态: 禁用</div>
                <div v-if="EqData[0].equipmentUse == 3">当前状态：报废</div>
              </el-col>
            </el-row>
          </el-card>
          <!--子设备查看-->
          <el-card style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>子设备</span>
            </div>
            <el-table :data="tableData4" style="width: 100%">
              <el-table-column label="序号" width="80">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="numbering" label="设备编号">
              </el-table-column>
              <el-table-column prop="name" label="设备名称">
              </el-table-column>
              <el-table-column prop="model" label="规格型号">
              </el-table-column>
              <el-table-column prop="type" label="设备类型">
              </el-table-column>
              <el-table-column prop="department" label="使用部门">
              </el-table-column>
              <el-table-column prop="location" label="存放位置">
              </el-table-column>
              <el-table-column label="当前状态">
                <template slot-scope="scope">
                  <el-tag type="success" effect="dark" v-if="scope.row.state == 1">正常使用</el-tag>
                  <el-tag type="warning" effect="dark" v-if="scope.row.state == 2">禁用</el-tag>
                  <el-tag type="danger" effect="dark" v-if="scope.row.state == 3">报废</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注">
              </el-table-column>
            </el-table>
          </el-card>
          <!--照片详细-->
          <el-card style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>设备图片</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="6" v-for="(item, index) in images" :key="index">
                <el-image :src="require('@/assets/images/' + item.path)" @click="previewImage(item.path)" fit="cover"
                  style="width: 50%; height: 100px">
                  <template slot="error">
                    <div class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </template>
                  <template slot="placeholder">
                    <div class="image-slot">
                      <i class="el-icon-loading"></i>
                    </div>
                  </template>
                </el-image>
              </el-col>
            </el-row>
          </el-card>
          <!--关联文件-->
          <el-card style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>关联文档</span>
              <el-button style="float: right;" type="primary" size="small">批量下载</el-button>
            </div>
            <el-table :data="tableData2" style="width: 100%">
              <el-table-column type="selection" width="55" align="center"></el-table-column>
              <el-table-column label="序号" width="55" align="center">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="filename" label="文件名" align="center"></el-table-column>
              <el-table-column prop="uploadTime" label="上传时间" align="center"></el-table-column>
              <el-table-column prop="uploader" label="上传者" align="center"></el-table-column>
              <el-table-column prop="size" label="文档大小" align="center"></el-table-column>
              <el-table-column label="操作" width="80" align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="downloadFile">下载</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <div style="height: 30px;"></div>
        </el-tab-pane>
        <el-tab-pane label="采购验收">
          <el-card>
            <div slot="header" class="clearfix">
              <span>采购信息</span>
            </div>
            <el-row :gutter="20" style="line-height: 3; margin-left: 40px; margin-right: -230px;">
              <el-col :span="12">
                <div>采购单号：CGDH2022245</div>
                <div>采购日期：2025-07-12</div>
                <div>采购人员：许含娇</div>
                <div>供应商：笑颜天供应商</div>
                <div>联系方式：18781583527</div>
                <div>采购理由：由于公司生产需求的增加以及现有设备的老化，为了提高生产效率和产品质量，计划采购一批新的数控机床。</div>
                <div>备注：</div>
              </el-col>
              <el-col :span="12">
                <div>采购主题：数控机床采购申请表</div>
                <div>采购部门：生产部门一</div>
                <div>联系方式：15276896416</div>
                <div>联系人：曹醒</div>
                <div>期望到货日期：2025-08-12</div>
              </el-col>
            </el-row>
          </el-card>

          <el-card style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>验收信息</span>
            </div>
            <el-row :gutter="20" style="line-height: 3; margin-left: 40px; margin-right: -230px;">
              <el-col :span="12">
                <div>验收单号：YSDH2022245</div>
                <div>验收日期：2025-07-12</div>
                <div>验收人员：英蓉蓉</div>
                <div>备注：</div>
              </el-col>
              <el-col :span="12">
                <div>验收主题：综合设备到货验收表</div>
                <div>验收部门：质检部门</div>
              </el-col>
            </el-row>
          </el-card>
        </el-tab-pane>
        <!--关联备件-->
        <el-tab-pane label="关联备件">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="备件列表" name="spareParts">
              <el-button type="primary" @click="exportData">导出</el-button>
              <el-input v-model="search" placeholder="请输入备件编号或名称" prefix-icon="el-icon-search"
                style="width: 300px; margin-left: 830px;"></el-input>
              <el-table :data="tableData3" style="width: 100%; margin-top: 20px;">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="序号" width="55" align="center">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" @click="viewItem(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="code" label="备件编码" align="center"></el-table-column>
                <el-table-column prop="name" label="备件名称" align="center"></el-table-column>
                <el-table-column prop="type" label="备件类型" align="center"></el-table-column>
                <el-table-column prop="model" label="规格型号" align="center"></el-table-column>
                <el-table-column prop="unit" label="单位" align="center"></el-table-column>
                <el-table-column prop="brand" label="品牌" align="center"></el-table-column>
                <el-table-column prop="manufacturer" label="生产厂家" align="center"></el-table-column>
                <el-table-column prop="supplier" label="供应商" align="center" width="150"></el-table-column>
                <el-table-column prop="supplier" label="关联数量" align="center"></el-table-column>
                <el-table-column prop="supplier" label="更换周期" align="center"></el-table-column>
                <el-table-column prop="supplier" label="参考单价" align="center"></el-table-column>
                <el-table-column prop="supplier" label="当前库存" align="center"></el-table-column>
                <el-table-column prop="supplier" label="库存金额" align="center"></el-table-column>
              </el-table>
              <el-pagination background layout="prev, pager, next, jumper" :total="total"
                style="margin-top: 20px; text-align: right;"></el-pagination>
            </el-tab-pane>
            <el-tab-pane label="更换记录" name="replacementRecords">
              <!-- 更换记录内容 -->
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-card>
                    <div slot="header">
                      <span>更换总数量</span>
                    </div>
                    <div>
                      <h2>400</h2>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card>
                    <div slot="header">
                      <span>更换次数</span>
                    </div>
                    <div>
                      <h2>70</h2>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              <el-button type="primary" @click="exportData">导出</el-button>
              <el-input placeholder="请输入备件编号或名称" v-model="search" clearable>
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
              <el-table :data="tableData4" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="operation" label="操作" width="80">
                  <template slot-scope="scope">
                    <el-link type="primary" @click="viewItem(scope.row)">查看</el-link>
                  </template>
                </el-table-column>
                <el-table-column prop="code" label="备件编码"></el-table-column>
                <el-table-column prop="name" label="备件名称"></el-table-column>
                <el-table-column prop="type" label="备件类型"></el-table-column>
                <el-table-column prop="model" label="规格型号"></el-table-column>
                <el-table-column prop="unit" label="单位"></el-table-column>
                <el-table-column prop="replacementType" label="更换类型"></el-table-column>
                <el-table-column prop="workOrder" label="关联工单"></el-table-column>
              </el-table>
              <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-size="10"
                layout="total, prev, pager, next" :total="totalItems">
              </el-pagination>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="报修记录"></el-tab-pane>
        <el-tab-pane label="维修记录"></el-tab-pane>
        <el-tab-pane label="设备保养"></el-tab-pane>
        <el-tab-pane label="设备巡检"></el-tab-pane>
        <el-tab-pane label="设备点检"></el-tab-pane>
        <el-tab-pane label="设备处置"></el-tab-pane>
        <el-tab-pane label="操作记录"></el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { listEquipment, listAnnex, listImg, SelectDocumentaion, SelectSubbDevices } from "@/api/eastjet-maintenance/sb/sb";
export default {
  data() {
    return {
      eq: {
        code: this.$route.query.code
      },
      EqData: [],
      //更换记录
      search: '',
      currentPage: 1,
      totalItems: 50,
      tableData4: [
        { index: 1, code: 'SP001', name: '轴承', type: '机械备件', model: '6204-2RS', unit: '件', replacementType: '维修更换', workOrder: 'BY-2025032562' },
        // 更多数据 ...
      ],
      //关联备件
      activeTab: 'spareParts',
      search: '',
      tableData3: [
        { index: 1, code: 'SP001', name: '轴承', type: '机械备件', model: '6204-2RS', unit: '件', brand: 'SKF', manufacturer: 'SKF集团', supplier: '瑞普轴承有限公司' },
        // 其他行数据...
      ],
      total: 45,
      //关联文件
      tableData2: [],
      images: [],
      tableData: [],
      tableData4: []//子设备
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      listEquipment(this.eq, "", "").then((res) => {
        console.log("设备数据", res.data.data.list)
        this.EqData = res.data.data.list;
      });
      listAnnex(this.eq).then((res) => {
        console.log("附件数据", res.data.data)
        this.tableData = res.data.data;
      });
      listImg(this.eq.code).then((res) => {
        console.log("图片数据", res.data.data)
        this.images = res.data.data;
      });
      SelectDocumentaion(this.eq.code).then((res) => {
        console.log("关联文件", res.data.data)
        this.tableData2 = res.data.data;
      });
      SelectSubbDevices(this.eq.code).then((res) => {
        console.log("子设备" + res.data.data)
        this.tableData4 = res.data.data;
      });
    },
    //更换记录
    viewItem(row) {
      console.log('查看:', row);
    },
    exportData() {
      console.log('导出数据');
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    //备件关联
    exportData() {
      // 导出逻辑
      alert('导出数据');
    },
    viewItem(row) {
      // 查看逻辑
      alert(`查看${row.name}`);
    },
    downloadFile() {
      // 此处添加下载逻辑
      alert('下载文件');
    },
    // 在这里定义需要的操作方法
    previewImage(src) {
      const imagePath = require(`@/assets/images/${src}`);
      this.$alert(`<img src="${imagePath}" style="width: 100%; height: auto; max-height: 500px;">`, '预览', {
        dangerouslyUseHTMLString: true,
        center: true
      });
    }
  }
};

</script>

<style scoped>
.box-cardpp {
  width: 1254px;
  margin-left: 30px;
}

.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #eee;
}

.image-preview {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 5px;
}
</style>
